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USE OF VECTOR GRAPHICS IN PAPER PRINTING 
AND WEBSITE DEVELOPMENT 

5 

Background of the Invention 

The present invention relates to conversion of vector graphics files to files 
1 0 suitable for display on a computer, such as a computer running an Internet browser. 

In the furniture industry, fumiture manufacturers have for years generated very 
carefully planned and designed catalogs to aid in the promotion and sale of their 
products. Catalog design has become quite sophisticated, with particularized placement 
of text and graphics on the pages being chosen by the catalog designers to achieve 
1 5 specialized visual effects. Among the effects desired are the overlay of one photograph 
over a part of another. 

With the advent of the Intemet and e-commerce endeavors, it is desired to 
replicate such catalogs on the Intemet so that viewers and potential customers on the 
Intemet will have identically the same image available to them as would be available in 
20 the printed catalog. 

Similarly, it may be desirable for many other types of print media to be 
transported to a browser-display with fidelity to the original. 

The state-of-the-art in printing, particularly v^th respect to catalogs, but for other 
printed products also, involves the use of digital electronics. The image to be printed is 
25 stored in an electronic file in a vector graphics format. In vector graphics, mathematical 
equations and file pointers are used to collate the text and images to be printed on the 
printed page. These files can then be used to make the separations used in the printing 
process according to known techniques. 

The size of the digital files for such printed pages, even using vector graphics, 
30 can be on the order of 25 million bytes, too large for transmission at reasonable speeds 
over commonly available digital networks. Also, among the 25 million bytes of 
information is much more detail than can typically be displayed on a monitor used in an 
Intemet or other browser system. Typically, browsers display information in much less 
resolution, such as in 



1 




the jpeg or gif format, having more on the order of 25,000 bytes of information, which 

can be reasonably quickly transmitted over digital networks. 

Similarly, the browsers display images according to instructions imbedded in a 

markup language, typically html. In html, code is written to determine the color, size, 
5 and placement of various items on a page, and such code is typically written or edited in 

a manual mode, although some page editor programs are now available. Nonetheless, 

creation of an html page or other markup language page to replicate v^th high fidelity the 

images of a printed catalog or other printed publication is very difficult and time 

consuming. Essentially, the html page must be prepared from scratch, requiring trial and 
10 error to determine how well the browser-displayed page replicates the printed page. 

Errors must be corrected by rewriting code. 

Accordingly, there is a need in the art for a system that will expedite the 

conversion of printed page digital files to those which can be displayed in html or other 

markup language format on browsers, 
1 5 Also, there is a need in the art for an economical way to replicate printed catalog 

pages and other printed pages in a browser display with high fidelity. 

Summary of the Invention 

20 The present invention fulfills this need in the art by providing a method of 

creating a web page from a vector graphics data file including converting the vector 
graphics data file from its native file format to a bit map graphics file format, modifying 
the bitmap graphics data file by converting color values to a format that can be displayed 
on a computer monitor, and inserting the modified bit map graphics data file into the web 

25 page. Typically, compression of the modified bitmap graphics data file takes place prior 
to inserting. Further, compressing may precede modifying. Alternatively, modifying 
may precede converting. The vector graphics data file need not be used to print on paper 
to be within the scope of the invention. 

Desirably, the bit map graphics file is compressed by reducing the resolution of 

30 an image encoded in the file to less than 100 dots per inch (dpi). Preferably, the bit map 
graphics file is compressed by reducing the resolution of an image encoded in the file to 
about 72 dpi. 
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In one embodiment, the bit map graphics file is compressed by converting the bit 
map graphics file to a joint photographic experts OP^g) file. This may occur by opening 
the bit map graphics file in a paint program and exporting the bit map graphics file to a 
jpeg file format. 

5 In another embodiment, the bit mapped graphics file is compressed by converting 

the bit mapped graphics file to a graphics interchange format (gif) file. Alternatively, the 
bit mapped graphics file may be compressed by converting the bit mapped graphics file 
to a tagged image file (tif) format file or an X bitmap (xbm) file. 

Typically, the compressed and modified bit map graphics data file is inserted into 
10 the web page by tagging the file as an inline image. The inline image may be a link to a 
higher resolution version of an image that is substantially the same as the inline image. 
Typically, the compressed and modified bit map graphics data file is inserted into the 
web page by tagging the file as an extemal image. 

In a preferred embodiment the vector graphics data file is a prepress data file. 
1 5 The prepress data file may be created using a software application program selected from 
the group consisting of QuarkXPress, Adobe Illustrator, Macromedia Freehand, Adobe 
PageMaker, Corel Draw and Adobe Acrobat. 

The web page is usually a markup language file. The markup language may be 
one selected from the group consisting of hypertext markup language (html), extensible 
20 markup language (xml). Cold Fusion markup language (cfml), commerce xml (cxml), 

handheld device markup language (hdml), standard generalized markup language (sgml), 
synchronized multimedia integration language (smil), extensible hypertext markup 
language (xhtml), extensible style langue (xsl), and wireless markup language (wml). 
The bit map graphics file is preferably an encapsulated postscript (eps) file. In 
25 one embodiment when the eps file is rendered, it makes an 8.5" by U" image. 

In a preferred embodiment, the vector graphics data file is a prepress data file, the 
bit map graphics file is an encapsulated post script (eps) file, and the prepress data file is 
converted to an eps file by exporting the prepress data file in its native file format to an 
eps format. In another embodiment, the vector graphics data file is a prepress data file, 
30 the bit map graphics file is in a tagged image file format (tif), and the prepress data file is 
converted to a tif file by exporting the prepress data file in its native file format to an tif 
format. In a preferred embodiment, the prepress data file is used to print paper copies, 
but that is not required to be within the scope of the invention. 
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Typically, the bit map graphics file is modified by converting the cyan, magenta, 
yellow, black (CMYK) color values to red, green, blue (RGB) color values. The CMYK 
color values may be converted to RGB color values by a paint program. 

The markup language may be selected fi"om the group consisting of hypertext 
5 markup language (html), extensible markup language (xml), Cold Fusion markup 
language (cfinl), commerce xml (cxml), handheld device markup language (hdml), 
standard generalized markup language (sgml), synchronized multimedia integration 
language (smil), extensible hypertext markup language (xhtml), extensible style langue 
(xsl), and wireless markup language (wml). 

10 The invention also provides a method of creating a web page from a composite 

file made up of a vector graphics data file and an image file including converting the 
vector graphics data file from its native file format to a bit map graphics file format, 
modifying the bitmap graphics data file by converting color values to a format that can 
be displayed on a computer monitor, and inserting the modified bit map graphics data 

1 5 file into the web page. 

The invention also provides a method of displaying a plurality of products on a 
website in connection the offering for sale of the plurality of products including creating 
a vector graphics data file, wherein the vector graphics data file includes data capable of 
being converted to a press plate to create a catalog printed on paper, deriving from the 

20 vector graphics data file an electronic catalog, wherein the electronic catalog appears to 
be substantially identical to the catalog printed on paper, and making the electronic 
catalog available for viewing using a browser. 

Further, the invention provides a method of displaying a plurality of products on 
a website in connection the offering for sale of the plurality of products including 

25 creating a composite file comprised of a vector graphics data file and an image file, 
wherein the composite file is capable of being converted to a press plate for a catalog 
printed on paper, deriving from the composite file an electronic catalog, wherein the 
electronic catalog appears to be substantially identical to the catalog printed on paper, 
and making the electronic catalog available for viewing using a browser. 

30 The invention also includes a method for creating a web page from a vector 

graphics data file, including converting the vector graphics data file from its native file 
format to a bit map graphics file format including both text and images, modifying the 
bitmap graphics data file by converting color values to a format that can be displayed on 
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a computer monitor, correcting errors in the text that occur when the vector graphics data 
file was converted from its native file format to a bit map graphics file format, and 
inserting the modified bit map graphics data file into the web page. 

The invention also provides a method of conunimicating including displaying on 
5 a web browser a web page. The web page was made by creating the web page from a 
vector graphics data file, including the steps outlined above. 

The invention also provides an article of manufacture including a terminal 
connected to a network and including a video display terminal. The video display 
terminal displays a displayed web page made by creating the web page from a vector 
1 0 graphics data file, as outlined above. 

Brief Description of the Drav^ings 

The invention will be better understood by a reading of the Detailed Description 
1 5 of the Preferred Embodiments along with a review of the drawings, in which: 

FIGURE 1 is a high level flow chart of a process according to a preferred 
embodiment of the invention; and 

FIGURE 2 is a schematic view of a computer terminal connected to a network to 
display a web page. 

20 

Detailed Description of the Preferred Embodiment 

Figure 1 shows a flow chart of the steps involved in connection with a preferred 
embodiment of the invention. First, the vector graphics data files are assembled to be 

25 available for use in a step A. Vector graphics, also knovra as object-oriented graphics, 
refers to software and hardware that use geometrical formulas to represent images. 
Vector graphics are created and manipulated in software called "draw" programs. The 
vector graphics data files will be composites of text, fonts, and graphics, with the vector 
graphics directing their assembly in a desired layout and appearance. 

30 In a preferred embodiment, the vector graphics files are created using a draw 

program, such as the QuarkXpress computer software program available fi-om Quark, 
Inc. of Denver, Colorado. Such programs are commonly used in the prepress industry. 
Other comparable programs can be used, such as Adobe Illustrator, Macromedia 
Freehand, Adobe PageMaker, Corel Draw, and Adobe Acrobat. The process will be 
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described with reference to QuarkXpress. In a preferred embodiment, the files should be 
established or modified so that "scale" is 100%, and "bleed" is set at 0. The "format" 
should be Color, with a PICT Preview. The "data" should be Binary, with OPI to 
Include Images. "Spread" should be left unchecked, unless it is a spread page, in which 
5 case it must be checked. Each page should be saved as an 814 x 1 1 eps format if it is 

desired to simulate that orientation. Altematively, if a spread is desired, made up of two 
side-by-side SVix 11 pages, then the file should be saved as 17 x 1 1 format. 

By exporting from the draw program, the files can be saved as eps files in step B. 
"Eps" stands for "encapsulated postscript," a file format used by Adobe programs. The 
1 0 export of the prepress data file is typically an export from the native file format to an eps 
format. 

In step C, the eps file is opened in Adobe Photoshop and converted to a jpeg file 
and simultaneously converted from CMYK color space to RGB for use in website 
displays. That is, bit map graphics file is converted to a jpeg file by opening the bit map 

1 5 graphics file in a paint program and exporting the bit map graphics file to a jpeg file 
format. A paint program is a graphics program that displays pictures on the display 
screen which are represented as bit-maps. Adobe Photoshop has built-in capabilities to 
perform these transformations. Other paint programs can be used. 

Other browser-friendly file formats can be substituted for jpeg, such as a graphics 

20 interchange format (gif) file. Altematively, the bit mapped graphics file may be 

compressed by converting the bit mapped graphics file to a tagged image file (tif) format 
file or an X bitmap (xbm) file. 

CMYK stands for cyan, magenta, yellow and black, which are the ink colors 
typically used in ink printing. RGB stands for red, green, blue, the colors that are 

25 typically combined to form a range of colors on video monitors. The resolution is 

stepped down from the high resolution of the eps and vector graphics files to one on the 
order of 72 dots per inch (dpi). This greatly reduces the file size, enabling faster 
transmission over networks like the Internet and reduces storage requirements. Other 
resolutions can be used, such as 100 dpi or less. The compression and color-space 

30 conversion may take place simultaneously. Altematively, one can precede the other. 

The jpeg files are displayed on a computer monitor in step D, where they can be 
compared with computer monitor displays of the vector graphics file or a printed catalog 
or other printed material derived from the vector graphics files. If errors are detected. 
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they can be corrected using various error correction routines in steps E, F, and G. These 
error correction routines will be discussed in more detail hereinafter. If these are 
successful as detected in a ftorther error evaluation step G, the file is saved as a jpeg in 
step C\ like previous step C. 
5 If the initial check for errors in block D indicates that no errors are present, then 

processing continues directly to block H. This saved jpeg file can then be loaded on a 
web server in step H. 

Often, prepress work is performed on Apple Macintosh computers, and web 
servers commonly are personal computers. In a situation of this sort, it is desirable to 
10 transfer files from the Macintosh to the PC using conventional file saving and transfer 
techniques, as will be apparent to those of ordinary skill in the art. 

In order to create the html code, a commercially available program called 
;3 PageMill is opened on the web server. Other suitable editor programs for html or other 

=n markup languages can be substituted. 

15 Working on the web server, a pre-existing markup language code template may 

be selected fi-om a collection of pre-existing templates. The template approximates the 
S P^g^ layout of the desired catalog. Alternatively, if there are no pre-existing templates, a 

new one can be created. These templates typically are simple and do not include a 
i3 particularized layout of text and graphics on the page. Rather, they include an indication 

S 20 as to whether the site may have a table of contents, links to other pages within the 
[3 website, or links to enlarged versions of images on the website page. As such, they are 

simple to create and edit. More complex files can be used if desired. 

Various browser-usable codes such as hypertext markup language (html), 
extensible markup language (xml). Cold Fusion markup language (cfinl), commerce 
25 markup language xml (cxml), handheld device markup language (hdml), standard 
generalized markup language (sgml), synchronized multimedia integration language 
(smil), extensible hypertext markup language (xhtml), extensible style language (xsl), 
and wireless markup language (wml) may be used as the markup language. 

The process then moves to step J. This involves creating the catalog html's with 
30 images in place and tabs created, using the markup language editor. That is, the jpeg 
images are keyed to frames in the templates, where they are desired to be located. 
Frames may be linked and cross linked as desired. No lengthy code writing is needed. 
Rather, the compressed and modified bit map graphics data file is inserted into the web 
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page by tagging the file as an inline image. The inline image may be a link to a higher 
resolution version of an image that is substantially the same as the inline image. 

A compressed and modified bit map graphics file is preferably inserted into the 
web page by tagging the file as an inline image. The inline image may be a link to a 
5 higher resolution version of an image that is substantially the same as the inline image, 
except usually larger in viewed size. Also, the compressed and modified bit map 
graphics data file may be inserted into the web page by tagging the file as an extemal 
image. 

Once the general format has been selected, catalog links can be established, 

1 0 whether to other websites or elsewhere back and forth within the catalog or other website 
document being created. 

If a splash page is desired, it can be attached as a lead-in page at step K. This can 
be done by opening an existing splash page and modifying the opened file and saving it 
as the splash page for the new website. If no existing splash page exists, it is simple html 

1 5 code writing to establish one. 

Step L establishes a homepage for the catalog. This involves opening an existing 
online html, creating and resaving as the new online html, and linking the online html to 
the catalog html. Then, the existing online entry page is opened and created and saved as 
a new entry page, and linked to the online html. 

20 Thereupon, in step M, the website can be activated. Once the entry html is 

loaded on a web server, the web server is or rebooted to activate all of the links in the 
html website. Preferably, the newly created website is checked using various types of 
browsers and browser configurations to ascertain that the pages display as desired. For 
example, the page can be viewed on an Apple Macintosh® computer or a personal 

25 computer PC while using web browsers such as Netscape® Navigator®, and Microsoft® 
Internet Explorer, 

Error Correction 

The error correction routines of step E v^U now be discussed. Typical errors 
30 arise from and are exhibited as poor displays of text material. The errors can be 

distortions in fonts, shaping, or sizes. Another error that sometimes may occur and 
require correction is that gradual color changes are not gradual in the browser display, 
but rather stair-step in gradation, called a graduated screen. Depending on the nature of 
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the prepress files being used, various error correction routines can be used. For example, 
if the prepress has been a QuarkXpress file, then the error correction routine E may be as 
follows: 



files as postscript files, not eps files. Open them again in Photoshop to see if the errors 
persist. If the errors continue, convert the postscript file to pdf using Acrobat Distiller®. 

10 Then, open the pdf file in Photoshop and compare to the printed sample or document. If 
the error continues, save the Quark page as a pdf file using Acrobat pdf writer. Again, 
open the pdf file in Photoshop and compare with the printed sample. 

If the error continues, try using the procedures on a different computer, 
particularly a different Macintosh. This series of iterative steps should correct most 

1 5 errors. If errors persist, then the error may not be correctable. 

If the prepress file is an Adobe Illustrator file, then the error correction routine E 
can take the form of exporting the file fi-om Quark as a tif file and comparing it to the 
printed or displayed image to see if that works. If that does not work, then the Quark file 
can be exported as a PS5 file to ascertain if that works. If not, it can be exported as an 

20 Illustrator eps file and checked to see if the error is corrected. In each case, the exported 
file is to be opened in Photoshop and compared to the printed or displayed sample or 
document to check to see if the error has been corrected. 

In the case of Adobe PageMaker as the prepress file, the Adobe PageMaker 
program can export the file as a pdf file. That pdf file is then opened in Photoshop and 

25 compared to a printed sample or document to ascertain if it is acceptable. That should 
correct most errors, but if not, the error may not be correctable. 

In the case of the prepress program being Macromedia Freehand®, the files can 
be exported in any one of five formats, preferably in the following order, and then 
opened in Photoshop and compared to see if the format is correct. First, export as a PS 

30 eps. Second, export as a generic eps. Third, export as a tif. Fourth, export as a DCS2. 
Fifth, export as a Quark eps. Sixth, save as an editable eps. The exported file can be 
opened in Photoshop and compared to the printed sample or document and should be 
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close the opened eps file, restart Quark, and resave the files in eps. 
If the errors continue to persist, then close the file again and open 
the files in an alternate version of Photoshop. 



If the errors continue to exist, revert back to the Quark files and save the Quark 
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corrected by one or the other of these ahemate methods. In the event that it is not 
corrected, it may not be correctable. 

Benefits and Uses 

5 The resuhing page on the website or other browser display will be of a relatively 

small size in comparison with prepress files, so that it will be transmittable in a 
reasonable amount of time. However, the image as displayed will be virtually 
indistinguishable from the printed page which has been copied. The only differences 
may be some possibly apparent loss of resolution or color deviations arising from errors 

10 in conversion from CMYK to RGB, However, such derivations are quite acceptable, and 
deemed to be minimal enough so that the browser image is substantially identical to the 
printed image obtained from the vector graphics file. 

Preferably, in the outputting of the file as a jpeg or gif, the file is compressed 
considerably so that the transmission time is at a commercially acceptable level over 

15 digital networks. For example, the file can be compressed by reducing the resolution of 
an image encoded in the file to less than 100 dots/inch, preferably to about 72 dots/inch. 
The type of files in which the bit map graphics file is converted to a jpeg file can 
generically be referred to as a paint program, and suitable paint programs may be used. 
In addition to the jpeg and gif files, the compressed file can be a tagged image file or an 

20 X bit map file. 

As will be appreciated, by converting the vector graphics file as a whole to a 
displayable jpeg or other bit-mapped file format, the layout achieved in the vector 
graphics file is exactly reproduced in the displayed bit-mapped file. This image is 
available for ready display via the markup language code to which it has been attached. 

25 Thus, the same layout is available in the browser display as in any printed product of the 
vector graphics display, without the need for writing markup language code to 
selectively place images and text, which could be a very time consuming and tedious 
task. 

Also, because the file size has been reduced in the process, transmission times for 
30 the files are relatively short. 

By the use of the file conversion steps set forth above, a method of doing 
business is created and enabled. That method of doing business involves the use of 
paper and browser accessible catalogs, which are substantially identical, with the 
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browser-accessible catalog being readily accessible in reasonable amounts of time over 
digital networks, such as the Worldwide Web. This enables a provider of goods and 
services in the catalog to reach customers through either medium, or both mediums, with 
consistent messages. 

5 Figure 2 shows a computer arrangement 10 including keyboard 12, central 

processing unit 14, monitor 16, and network connection 18. When connected to a 
network making available pages created as outlined above, the result can be the display 
of pages on the monitor substantially identical to pages that may have been printed from 
the vector graphics files. 

10 
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